<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%--使用标签库--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>购物车</title>
    <style>
        #div1{
            font-size: 14px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
        #div1>div{
            width: 20%;
            margin:10px 0px;
        }
        .shuiguo{
            width: 95%;
            height: 200px;
            margin: 5px auto;
        }
    </style>
    <link href="../../resource/css/myCart.css" type="text/css" rel="stylesheet" />
</head>

<body style="background:url(../../resource/images/mycart.jpg) ;-webkit-background-size: cover;background-size:cover;">

<div id="header"><img src="../../resource/images/logo.png" alt="logo" style="margin: 0 auto" /></div>

<div id="nav">您的位置：<a href="toIndex.do?uid=${sessionScope.uid}">首页</a>  > 我的购物车</div>


<div id="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
        <form action="" method="post" name="myform">
            <tr>
                <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td>
                <td class="title_2" colspan="2">店铺书籍</td>
                <td class="title_3">所获积分</td>
                <td class="title_4">单价（元）</td>
                <td class="title_5">数量</td>
                <td class="title_6">小计（元）</td>
                <td class="title_7">操作</td>
            </tr>
            <div id="div1">
                <c:forEach items="${cartList}" var="car">
                    <tr>
                        <td colspan="8" class="shopInfo">店铺：<a href="#">IT大牛书店</a>    卖家：<a href="#">我是大厂CTO</a> </td>
                    </tr>
                    <tr id="product2">
                        <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>
                        <td class="cart_td_2"><img src="${car.imgurl}" alt="shopping" height="120" width="135" /></td>
                        <td class="cart_td_3"><a href="#">${car.pname}</a><br />
                            保障：七天无理由</td>
                        <td class="cart_td_4">12</td>
                        <td class="cart_td_5">${car.price}</td>
                        <td class="cart_td_6">
                            <img src="../../resource/images/minus.jpg" alt="minus" onclick="changeNum('num_${car.carid}','minus')" class="hand"/>
                            <input id="num_${car.carid}" type="text"  value="1" class="num_input" readonly="readonly"/>
                            <img src="../../resource/images/adding.jpg" alt="add" onclick="changeNum('num_${car.carid}','add')"  class="hand"/>
                        </td>
                        <td class="cart_td_7" style="color: black;"></td>
                        <td class="cart_td_8"><a href="delete.do?carid=${car.carid}&uid=${car.uid}">删除</a></td>
                    </tr>
                </c:forEach>
            </div>
            <tr>
                <td colspan="8" class="line"></td>
            </tr>
            <tr>
                <td  colspan="3"><a href="javascript:deleteSelectRow()"></a></td>
                <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
                    可获积分 <label class="yellow" id="integral"></label> 点<br/>
                    <button type="button" class="btn btn-info" ><a href="forcount.do">点击购买</a></button>
                </td>
            </tr>
        </form>
    </table>
</div>

<script>
    /*改变所购商品的数量*/
    function changeNum(numId,flag){/*numId表示对应商品数量的文本框ID，flag表示是增加还是减少商品数量*/
        var numId=document.getElementById(numId);
        if(flag=="minus"){/*减少商品数量*/
            if(numId.value<=1){
                alert("宝贝数量必须是大于0");
                return false;
            }
            else{
                numId.value=parseInt(numId.value)-1;
                productCount();
            }
        }
        else{/*flag为add，增加商品数量*/
            numId.value=parseInt(numId.value)+1;
            productCount();
        }
    }

    /*自动计算商品的总金额、总共节省的金额和积分*/
    function productCount(){
        var total=0;      //商品金额总计
        var integral=0;   //可获商品积分

        var point;      //每一行商品的单品积分
        var price;     //每一行商品的单价
        var number;    //每一行商品的数量
        var subtotal;  //每一行商品的小计

        /*访问ID为shopping表格中所有的行数*/
        var myTableTr=document.getElementById("shopping").getElementsByTagName("tr");
        if(myTableTr.length>0){
            for(var i=1;i<myTableTr.length;i++){/*从1开始，第一行的标题不计算*/
                if(myTableTr[i].getElementsByTagName("td").length>2){ //最后一行不计算
                    point=myTableTr[i].getElementsByTagName("td")[3].innerHTML;
                    price=myTableTr[i].getElementsByTagName("td")[4].innerHTML;
                    number=myTableTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
                    integral+=point*number;
                    total+=price*number;
                    myTableTr[i].getElementsByTagName("td")[6].innerHTML=price*number;
                }
            }
            document.getElementById("total").innerHTML=total;
            document.getElementById("integral").innerHTML=integral;

        }
    }
    window.onload=productCount;

    /*复选框全选或全不选效果*/
    function selectAll(){
        var oInput=document.getElementsByName("cartCheckBox");
        for (var i=0;i<oInput.length;i++){
            oInput[i].checked=document.getElementById("allCheckBox").checked;
        }
    }

    /*根据单个复选框的选择情况确定全选复选框是否被选中*/
    function selectSingle(){
        var k=0;
        var oInput=document.getElementsByName("cartCheckBox");
        for (var i=0;i<oInput.length;i++){
            if(oInput[i].checked==false){
                k=1;
                break;
            }
        }
        if(k==0){
            document.getElementById("allCheckBox").checked=true;
        }
        else{
            document.getElementById("allCheckBox").checked=false;
        }
    }

    /*删除单行商品*/
    function deleteRow(rowId){
        var Index=document.getElementById(rowId).rowIndex; //获取当前行的索引号
        document.getElementById("shopping").deleteRow(Index);
        document.getElementById("shopping").deleteRow(Index-1);
        productCount();
    }

    /*删除选中行的商品*/
    function deleteSelectRow(){
        var oInput=document.getElementsByName("cartCheckBox");
        var Index;
        for (var i=oInput.length-1;i>=0;i--){
            if(oInput[i].checked==true){
                Index=document.getElementById(oInput[i].value).rowIndex; /*获取选中行的索引号*/
                document.getElementById("shopping").deleteRow(Index);
                document.getElementById("shopping").deleteRow(Index-1);
            }
        }
        productCount();
    }
</script>

<script type="text/javascript" src="../../resource/js/myCart.js"></script>
</body>
</html>
